/**
 * 用于表格操作栏的操作图标
 * @function useIcons
 * @Author: linzy
 * @Date: 2022-05-09
 * @param {icon[]} icons - 操作图标对象
 * @param {object} record - 表格行对象
 * @param {number} index - 表格行下标
 * @param {boolean | function} show - show(record,index) {} 需要返回布尔值 true为显示 false为不显示
 * @property {object} text - 文本，如只显示文本并不需要title时，传入
 * @property {ReactDOM} render - 传入的图标
 * @property {function} onConfirm - antd组件Popconfirm的onConfirm方法
 * @property {object} confirmProps - antd组件Popconfirm的传参对象
 * @property {string} title - antd组件Tooltip的title
 * @property {object} tooltipProps - antd组件Tooltip的传参对象
 * @property {object} style - 样式对象
 * @property {string} type - antd组件Icon的 图标类型
 * 常用的type
 * 删改查 <Icon type="delete" /> <Icon type="edit" /> <Icon type="eye" />
  上线、下线 <Icon type="arrow-up" /> <Icon type="arrow-down" />
  审核 <Icon type="audit" />
  下载 <Icon type="download" />
  导出 <Icon type="export" />
  复制 <Icon type="copy" />
  评论 <Icon type="message" />
  上传 <Icon type="upload" />
  视频 <Icon type="video-camera" theme="filled" />
  屏蔽 <Icon type="stop" />
  收藏 <Icon type="star" />
  人 <Icon type="user" />
  列表 <Icon type="unordered-list" /> <Icon type="ordered-list" />
  搜索 <Icon type="search" />
  时间 排期<Icon type="clock-circle" />
  商品 <Icon type="shopping" />
  优惠券 <Icon type="money-collect" />
  标签 <Icon type="tag" />
  重置 <Icon type="redo" />
  图片 <Icon type="picture" />
  退出 <Icon type="export" />
  汽车 物流 <Icon type="car" />
  设置 <Icon type="setting" />
 * @property {boolean} danger - 图标是否是危险色
 * @property {object} iconProps - antd组件Icon的传参对象
 * @property {string} href - a标签跳转的路由
 * @property {string} target - a标签跳转的的target属性
 * @property {function} onClick - 点击事件 onClick(record, index))
 * @property {string} aProps - a标签跳转的的传参对象
 * <caption>操作图标对象 icon</caption>
 * @example
 * const columns = useColumns([
 *   {tabIndex: 'id',type: 'copy',label:'ID',tdWidth: 4},
 *   {tabIndex: 'cover',type: 'preview',label:'图片'},
 *   {label: '操作',buttons: [
        {
          title: "生效",
          type: "check",
          style: {
            color: "#52c41a"
          },
          show(record) {
            return record.isEffect === 0;
          },
          onClick(row) {
            btnClick("isEffect", row);
          }
        }
      }
 *   ])

 */
import { Tooltip, Icon, Popconfirm, Divider } from "antd";
import {
  setOutAttrs,
  setDefaultAttrs,
  getBoolean,
  getIconType,
  getIconTitle
} from "@/hooks/tools";

export default useIconProps => {
  const { icons = [], record, index } = useIconProps;
  // 排除show返回false
  const filterIcons = icons.filter(item =>
    getBoolean(item.show, record, index)
  );
  const iconsRender = filterIcons.map((item, i, list) => {
    const {
      text,
      render,
      onConfirm,
      confirmProps = {},
      title,
      tooltipProps = {},
      style,
      type,
      theme,
      iconProps = {},
      href,
      target,
      onClick,
      loading,
      aProps = {}
    } = item;
    setDefaultAttrs(confirmProps, {
      title: `确定要${(title || text) ?? "删除"}该项吗？`,
      disabled: !(confirmProps.onConfirm || onConfirm)
    });
    setDefaultAttrs(item, {
      danger: /(delete|del|remove)/i.test(type) ? true : false
    });
    setOutAttrs(tooltipProps, {
      title: title ? title : type ? getIconTitle(type) : ""
    });
    setOutAttrs(iconProps, { style, theme, type: getIconType(type) });
    setOutAttrs(aProps, { href, target });
    return (
      <>
        <Popconfirm
          placement="topRight"
          {...confirmProps}
          onConfirm={() => {
            if (onConfirm) {
              onConfirm(record, index);
            } else if (confirmProps && confirmProps.onConfirm) {
              confirmProps.onConfirm(record, index);
            }
          }}
        >
          <Tooltip {...tooltipProps}>
            <a
              style={{
                color: item.danger ? "#f00" : ""
              }}
              {...aProps}
              onClick={!loading && onClick && (() => onClick(record, index))}
            >
              {render ? (
                render
              ) : type ? (
                <Icon
                  style={{
                    color: item.danger ? "#f00" : "inherit"
                  }}
                  {...iconProps}
                />
              ) : (
                text || title
              )}
            </a>
          </Tooltip>
        </Popconfirm>
        {i < list.length - 1 && <Divider type="vertical"></Divider>}
      </>
    );
  });
  return iconsRender;
};
